<template>
  <div class="container">
    <div
      class="box"
      v-for="(item, index) in boxList"
      :key="item.id"
      v-if="boxList.length > 0"
      @click="onClick(item)"
    >
      <div class="box-top" >
        <div class="box-top_left">
          <div class="left_img">
            <img
              src="../../../../assets/images/datavPop/infrared.png"
              style="width: 100%; height: 100%"
              alt=""
            />
          </div>
          <div class="left_name">
            <div class="name_top">
              {{ item.addressMapping }}
            </div>
            <div class="name_bottom">{{ item.detectorTypeName || ''}}</div>
          </div>
        </div>
        <div class="box-top_right">
          <el-switch
            v-model="item.switch"
            :active-value="true"
            :inactive-value="false"
            active-color="#afceff"
            inactive-color="#4d6189"
            :width="46"
            style="opacity: 0.8; transform: scale(0.9)"
            @change="onSwitch(item, index)"
            @click.native.stop
          >
          </el-switch>
        </div>
      </div>
      <div
        class="box-bottom"
        v-if="item.commandInfos && item.commandInfos.length > 0"
      >
        <div
          v-for="(item2, index2) in item.commandInfos"
          :key="index2"
          style="margin-right: 10px"
        >
          <div :class="[item2.bgColor]">
            <span>{{ item2.statusName }}</span>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <div class="no-warn-info" v-show="boxList.length <= 0">
        <img :src="wugj" />
        <div>暂无多线盘数据</div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "",
  props: ["ml_reel", "Info_mqtt"],
  data() {
    return {
      boxList: [],
      groupList: [],
      wugj: require("@assets/images/datav/wugj.png"),
    };
  },
  watch: {
    ml_reel: {
      handler(newVal) {
        let arr = [];
        if (newVal && newVal.length) {
          this.groupList = this.groupDevicesByGroupNo(newVal);
          arr = this.processDeviceData(this.groupList);
        }
        this.boxList = arr;
      },
      deep: true,
    },
    Info_mqtt: {
      handler(newVal) {
        if (newVal.layoutType == 2) {
          for (let index = 0; index < this.boxList.length; index++) {
            const element = this.boxList[index];
            if (element.id == newVal.id) {
              for (
                let index2 = 0;
                index2 < newVal.commandInfos.length;
                index2++
              ) {
                const element2 = newVal.commandInfos[index2];
                if (element.commandInfos.length) {
                  for (
                    let index3 = 0;
                    index3 < element.commandInfos.length;
                    index3++
                  ) {
                    const element3 = element.commandInfos[index3];
                    if (element3.statusType == element2.statusType) {
                      element3.statusValue = element2.statusValue;
                      if (element2.statusType == 1) {
                        element3.bgColor =
                          element3.statusValue == "0" ? "off" : "onStart";
                        element.switch =
                          element2.statusValue == 1 ? true : false;
                      } else if (element2.statusType == 2) {
                        element3.bgColor =
                          element3.statusValue == "0" ? "off" : "onStop";
                        element.switch =
                          element2.statusValue == 1 ? false : true;
                      } else if (element2.statusType == 3) {
                        element3.bgColor =
                          element3.statusValue == "0" ? "off" : "onFeedback";
                      } else if (element2.statusType == 4) {
                        element3.bgColor =
                          element3.statusValue == "0" ? "off" : "onError";
                      } else if (element2.statusType == 5) {
                        element3.bgColor =
                          element3.statusValue == "0" ? "off" : "onWork";
                      }
                      break;
                    }
                  }
                }
              }
            }
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    onClick(item){
       this.$parent.getDevice(item);
    },
    processDeviceData(groupedList) {
      const result = [];
      groupedList.forEach((group) => {
        const groupNo = group[0].groupNo;
        if (!groupNo) return;

        // 合并 commandInfos 并去重
        const mergedCommandInfos = new Map();
        group.forEach((device) => {
          if (device.commandInfos) {
            device.commandInfos.forEach((info) => {
              if (info.statusName == "启用" || info.statusName == "启动") {
                group[0].startId = device.id;
              }
              if (info.statusName == "停止") {
                group[0].stopId = device.id;
              }
              if (!mergedCommandInfos.has(info.statusType)) {
                mergedCommandInfos.set(info.statusType, { ...info });
              }
            });
          }
        });

        // 转换为数组并排序
        const commandInfosArray = Array.from(mergedCommandInfos.values()).sort(
          (a, b) => {
            return parseInt(a.statusType) - parseInt(b.statusType);
          }
        );

        group[0].switch = false;

        // 添加样式类
        commandInfosArray.forEach((info) => {
          if (info.statusName == "启用" || info.statusName == "启动") {
            info.bgColor = info.statusValue == "0" ? "off" : "onStart";
          } else if (info.statusName == "反馈") {
            info.bgColor = info.statusValue == "0" ? "off" : "onFeedback";
          } else if (info.statusName == "停止") {
            info.bgColor = info.statusValue == "0" ? "off" : "onStop";
          } else if (info.statusName == "故障") {
            info.bgColor = info.statusValue == "0" ? "off" : "onError";
          } else if (info.statusName == "工作") {
            info.bgColor = info.statusValue == "0" ? "off" : "onWork";
          }
          if (
            (info.statusName == "启用" || info.statusName == "启动") &&
            info.statusValue == "1"
          ) {
            group[0].switch = true;
          }

          if (info.statusName == "停止" && info.statusValue == "1") {
            group[0].switch = false;
          }
        });

        // 构建结果对象
        const resultObj = { ...group[0] };
        resultObj.commandInfos = commandInfosArray;

        result.push(resultObj);
      });

      return result;
    },

    groupDevicesByGroupNo(deviceList) {
      const groupMap = new Map();

      deviceList.forEach((device) => {
        const groupNo = device.groupNo;
        if (!groupMap.has(groupNo)) {
          groupMap.set(groupNo, []);
        }
        groupMap.get(groupNo).push(device);
      });

      return Array.from(groupMap.values());
    },

    // 切换开关
    onSwitch(itme,index) {
      this.$parent.onSwitch(itme);
    },

    // 反馈状态关闭
    onCloseFeedback(item) {
      let boxList = JSON.parse(JSON.stringify(this.boxList));
      for (let index = 0; index < boxList.length; index++) {
        const element = boxList[index];
        if (element.id == item.id) {
          for (let index2 = 0; index2 < element.commandInfos.length; index2++) {
            const element2 = element.commandInfos[index2];
            if (element2.statusName == "反馈" && element2.statusType == "3") {
              element2.statusValue = "0";
              element2.bgColor = "off";
            }
          }
          break;
        }
      }
      this.boxList = boxList;
    },

    // 取消时更改回状态
    onChangeSwitch(item) {
      this.boxList.forEach((element) => {
        if (element.id == item.id) {
          element.switch = !item.switch;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.container {
  height: 100%;
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;

  .box {
    .marginLeft(10);
    .marginRight(10);
    .marginBottom(10);
    .width(280);
    .height(140);
    background: url(../../../../assets/images/datav/fc-item-bg.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;

    .box-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .box-top_left {
        width: 70%;
        display: flex;

        .left_img {
          width: 40px;
          height: 40px;
          .marginRight(14);
        }

        .left_name {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .fontSize(16);

          .name_top {
            .fontSize(14);
            font-weight: 500;
            color: #d2e1fe;
            max-width: 110px;
          }

          .name_bottom {
            .fontSize(12);
            font-weight: 400;
            color: #8ea2cb;
          }
        }
      }
    }

    .box-bottom {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .off {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: "";
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #2d487c;
          box-shadow: inset 0px 4px 10px 1px rgba(103, 125, 167, 0.79);
          .marginRight(4);
        }
      }

      .onStart {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: "";
          width: 12px;
          height: 12px;
          border-radius: 50%;
          // background: #67c23a;
          // box-shadow: inset 0px 4px 10px 1px rgba(104, 196, 59, 0.79);
          .marginRight(4);
          animation: onStartAnimation 0.6s ease-in-out infinite alternate;
        }
      }

      .onStop {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: "";
          width: 12px;
          height: 12px;
          border-radius: 50%;
          // background: #67c23a;
          // box-shadow: inset 0px 4px 10px 1px rgba(104, 196, 59, 0.79);
          .marginRight(4);
          animation: onStopAnimation 0.6s ease-in-out infinite alternate;
        }
      }

      .onFeedback {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: "";
          width: 12px;
          height: 12px;
          border-radius: 50%;
          // background: #7367f0;
          // box-shadow: inset 0px 4px 10px 1px rgba(115, 103, 239, 0.79);
          .marginRight(4);
          animation: onFeedbackAnimation 0.6s ease-in-out infinite alternate;
        }
      }

      .onError {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: "";
          width: 12px;
          height: 12px;
          border-radius: 50%;
          // background: #d5171d;
          // box-shadow: inset 0px 4px 10px 1px rgba(212, 22, 28, 0.79);
          .marginRight(4);
          animation: onErrorAnimation 0.6s ease-in-out infinite alternate;
        }
      }

      .onWork {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: "";
          width: 12px;
          height: 12px;
          border-radius: 50%;
          // background: #409eff;
          // box-shadow: inset 0px 4px 10px 1px rgba(64, 159, 254, 0.79);
          .marginRight(4);
          animation: onWorkAnimation 0.6s ease-in-out infinite alternate;
        }
      }

      /* 定义动画关键帧 */
      @keyframes onStartAnimation {
        0% {
          background-color: rgba(112, 202, 67, 0.5);
          /* 淡绿色 */
          box-shadow: 0 0 5px rgba(112, 202, 67, 0.5);
        }

        100% {
          background-color: rgba(84, 252, 0, 1);
          /* 深绿色 */
          box-shadow: 0 0 15px rgba(84, 252, 0, 1);
        }
      }

      @keyframes onFeedbackAnimation {
        0% {
          background-color: rgba(131, 121, 240, 0.5);
          /* 淡紫色 */
          box-shadow: 0 0 5px rgba(131, 121, 240, 0.5);
        }

        100% {
          background-color: rgba(129, 118, 248, 1);
          /* 深紫色 */
          box-shadow: 0 0 15px rgba(129, 118, 248, 1);
        }
      }

      @keyframes onStopAnimation {
        0% {
          background-color: rgba(212, 22, 28, 0.5);
          /* 淡红色 */
          box-shadow: 0 0 5px rgba(212, 22, 28, 0.5);
        }

        100% {
          background-color: rgba(255, 0, 8, 1);
          /* 深红色 */
          box-shadow: 0 0 15px rgba(255, 0, 8, 1);
        }
      }

      @keyframes onErrorAnimation {
        0% {
          background-color: rgba(230, 162, 60, 0.5);
          /* 淡橙色（#e6a23c） */
          box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
        }

        100% {
          background-color: rgba(255, 153, 0, 1);
          /* 深橙色（#e6a23c） */
          box-shadow: 0 0 15px rgba(255, 153, 0, 1);
        }
      }

      @keyframes onWorkAnimation {
        0% {
          background-color: rgba(64, 159, 254, 0.5);
          /* 淡蓝色 */
          box-shadow: 0 0 5px rgba(64, 159, 254, 0.5);
        }

        100% {
          background-color: rgba(0, 128, 255, 1);
          /* 深蓝色 */
          box-shadow: 0 0 15px rgba(0, 128, 255, 1);
        }
      }

      span {
        color: #fff;
        .fontSize(14);
      }
    }
  }

  .no-warn-info {
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-top: 1.5%;
    color: #fff;
    font-size: 0.7vw;

    > img {
      width: 110px;
      height: 110px;
      margin-bottom: 10px;
    }
  }
}
</style>
